Skip to main content

Chapter 1: Lets Begin !!!

1. JavaScript Fundamentals​

Understanding core JavaScript concepts is pivotal before moving on to React.

Tasks:

a. Variables & Data Types:​

  • Declare variables using var, let, const.

  • Explore different data types: String, Number, Boolean, Array, Objects, etc.

    Task: Create a program that stores details about a person (name, age, hobbies) in appropriate data types.

b. Conditional Statements & Loops:​

  • Practice if, else if, and else statements.

  • Explore for, while, and do...while loops.

    Task: Write a program that prints out all even numbers between 1 to 100 using a loop and conditional statements.

c. Functions:​

  • Create regular functions.

  • Explore arrow functions.

    Task: Create a function that takes an array of numbers and returns the sum of all numbers.

d. Arrays & Array Methods:​

  • Familiarize yourself with methods like push(), pop(), shift(), unshift(), map(), filter(), etc.

    Task: Given a list of products with prices, create a new array with products that cost more than $50.

e. Objects:​

  • Create objects with key-value pairs.

  • Access and modify object properties.

    Task: Define an object to represent a book, with properties for title, author, and a method to display a summary.

f. Events & DOM Manipulation:​

  • Understand how to select DOM elements using querySelector.

  • Add event listeners to DOM elements.

    Task: Create a simple counter on a webpage. Have two buttons – one to increase the counter and one to decrease it, and display the current counter value on the page.

g. ES6+ Features:​

  • Explore template literals, destructuring, spread/rest operators, and more.

    Task: Given an object representing a student, use destructuring to extract the name and age properties into variables. Use template literals to display a message: "Hello, my name is [name] and I am [age] years old."

Project: Interactive Quiz:​

  • Build a simple quiz game on a webpage.
  • Store multiple-choice questions in an array of objects.
  • Display one question at a time and allow the user to answer.
  • At the end of the quiz, display the user's score.
  • (Advanced) Enhance the quiz with timers, score multipliers for quick answers, or other gamification elements.

By immersing yourself in these tasks, you'll solidify your understanding of foundational JavaScript. This foundation will be vital as you delve into the complexities of React and other JavaScript frameworks and libraries.